import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';

// 引入图片
import cookbook from '@/assets/images/cookbook.png'
import cookbookActive from '@/assets/images/cookbook-active.png'
// import location from '@/assets/images/location.png'
// import locationkActive from '@/assets/images/location-active.png'
import menu from '@/assets/images/menu.png'
import menuActive from '@/assets/images/menu-active.png'
import more from '@/assets/images/more.png'
import moreActive from '@/assets/images/more-active.png'


// 动画
import { TransitionGroup, CSSTransition } from 'react-transition-group'

// 首页
import Cookbook from '@/views/cookbook'
import Cate from '@/views/cate'
import More from '@/views/more'

class index extends Component {
  state = {
    selectedTab: 'cookbook',
    // selectedTab: 'more',
    // 让底部导航条，显示还是隐藏，日后存放于redux中
    // hidden: false,
  }

  render() {
    console.log( this.state.selectedTab);
    return (
      // <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
         <TransitionGroup  style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
        <CSSTransition
            // 如果你是history模式，可以使用this.props.location.key
            // 如果你使用hash模式，只能使用this.props.location.pathname
            // key={this.props.location.pathname}
            key={ this.state.selectedTab}
            timeout={600}
            // 样式写使用对象，完全的自定义动画类名称
            classNames={{
              enter: 'animate__animated animate__fadeInRightBig',
              enterActive: 'animate__animated animate__fadeInRightBig',
              exit: 'animate__animated animate__fadeInRightBig',
              exitActive: 'animate__animated animate__fadeInRightBig'
            }}
            // style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}
           >
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#000"
          barTintColor="white"
          // hidden={this.state.hidden}
        >
          <TabBar.Item
            title="菜谱"
            key="cookbook"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${cookbook}) center center /  21px 21px no-repeat`
            }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${cookbookActive}) center center /  21px 21px no-repeat`
            }}
            />
            }
            selected={this.state.selectedTab === 'cookbook'}
            // badge={1}
            onPress={() => {
              this.setState({
                selectedTab: 'cookbook',
              });
            }}
            data-seed="logId"
          >



            <Cookbook />
          </TabBar.Item>


          <TabBar.Item
            title="分类"
            key="menu"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${menu}) center center /  21px 21px no-repeat`
            }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${menuActive}) center center /  21px 21px no-repeat`
            }}
            />
            }
            onPress={() => {
              this.setState({
                selectedTab: 'menu',
              });
            }}
            selected={this.state.selectedTab === 'menu'}
            // badge={1}
            
            data-seed="logId"
          >
           <Cate />
          </TabBar.Item>


          <TabBar.Item
            title="更多"
            key="more"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${more}) center center /  21px 21px no-repeat`
            }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${moreActive}) center center /  21px 21px no-repeat`
            }}
            />
            }
           
            // badge={1}
            onPress={() => {
              this.setState({
                selectedTab: 'more',
              });
            }}
            selected={this.state.selectedTab === 'more'}
            data-seed="logId"
          >
            <More />
          </TabBar.Item>
        </TabBar>
        </CSSTransition>
       </TransitionGroup>
              // </div>
    );
  }
}

export default index;
